<style>


#actions {
	float: right;
}
</style>

<link rel="stylesheet" href="/asset/more/mask.css" type="text/css" media="screen" name="no name" charset="utf-8">

<div style="border: 2px solid #777; background: #fbb; padding: 20px; height: 700px; width: 400px;">
	<div id="foo" style="width: 200px; height: 200px; overflow:hidden; background:#555; border: 10px solid #000;">
		foo<br>
		foo<br>
		foo<br>
		foo<br>
		foo<br>
	</div>
</div>

<script src="/depender/build?require=More/Mask,Core/Element.Event"></script>

<script>

makeActions([
	{
		title: "Mask:element",
		description: "Overlays a target element with a semi-transparent layer.",
		fn: function(){
			$('foo').mask();
		}
	},
	{
		title: "Unmask:element",
		description: "Hides the overlay layer.",
		fn: function(){
			$('foo').unmask();
		}
	},
	{
		title: "Document:mask",
		description: "Overlays the window with a semi-transparent layer. Scroll down to verify it covers the whole document. Clicking the mask will remove it.",
		fn: function(){
			$(document.body).mask({
				style: {
					background: '#666',
					opacity: 0.6
				},
				hideOnClick: true
			});
		}
	},
	{
		title: "Document:unmask",
		description: "Hides the document's overlay.",
		fn: function(){
			$(document.body).unmask();
		}
	}

]);

</script>
